<template>
  <div>
    <h3>门店修改页面</h3>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">门店名称</td>
          <td><input type="text" v-model="info.ShopName" /></td>
        </tr>
        <tr>
          <td align="right">分店名称</td>
          <td><input type="text" v-model="info.BranchName" /></td>
        </tr>
        <tr>
          <td align="right">门店图片</td>
          <td>
            <input type="file" @change="img" />
            <img :src="info.Photo" width="100" height="100" />
          </td>
        </tr>
        <tr>
          <td align="right">开业时间</td>
          <td><input type="date" v-model="info.OpenTime" /></td>
        </tr>
        <tr>
          <td align="right">状态</td>
          <td>
            <input
              type="radio"
              name="state"
              :value="1"
              v-model="info.State"
            />是
            <input
              type="radio"
              name="state"
              :value="0"
              v-model="info.State"
            />否
          </td>
        </tr>
        <tr>
          <td align="right">门店介绍</td>
          <td>
            <textarea rows="5" cols="50" v-model="info.Desc"></textarea>
          </td>
        </tr>
        <tr>
          <td align="right">门店地址</td>
          <td>
            <select v-model="info.AddRessId">
              <option value="">请选择</option>
              <option :value="item.Id" v-for="item in addressList">
                {{ item.AddressName }}
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">门店类型</td>
          <td>
            <select v-model="info.Type">
              <option value="">请选择</option>
              <option value="竞技酒店">竞技酒店</option>
              <option value="豪华酒店">豪华酒店</option>
              <option value="五星级酒店">五星级酒店</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">门店特色</td>
          <td>
            <input
              type="checkbox"
              name="tese"
              value="办婚礼"
              v-model="info.TeSe"
            />办婚礼<input
              type="checkbox"
              name="tese"
              value="办满月"
              v-model="info.TeSe"
            />办满月
            <input
              type="checkbox"
              name="tese"
              value="升学宴"
              v-model="info.TeSe"
            />升学宴
            <input
              type="checkbox"
              name="tese"
              value="团建"
              v-model="info.TeSe"
            />团建
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="确定"
              class="btn btn-primary"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
//到修改页面后先写后端借口就会变量  双向绑定上
let info: any = reactive({
  Id: route.query.id,
  ShopName: '',
  BranchName: '',
  Photo: '',
  OpenTime: '',
  State: 1,
  TeSe: '',
  TeSeCount: 0,
  Desc: '',
  AddRessId: '',
  Type: '',
});
//门店地址
let addressList: any = ref([]);

onMounted(() => {
  getAddressList();
  getData();
});

//2.第二步返填
const getData = () => {
  axios({
    url: '/api/Houses/GetShopModel',
    method: 'get',
    params: {
      id: route.query.id, //route.query.id路由跳转传递过来的叁数
    },
  })
    .then((res) => {
      console.log(res);
      Object.assign(info, res.data);
      info.OpenTime = res.data.OpenTime.substring(0, 10);
      info.TeSe = res.data.TeSe.split(',');
    })
    .catch((err) => {
      console.log(err);
    });
};

//2.读取数据列表(地址)

const getAddressList = () => {
  axios({
    url: '/api/Shops/GetAddRessList',
    method: 'get',
  })
    .then((res) => {
      console.log(res);
      addressList.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

//3.如果有图片上传  先写图片上传
const img = (e: any) => {
  //获取数据
  let obj = e.target.files[0];
  //将数据转成FormData格式
  let f = new FormData();
  f.append('file', obj);
  //发送网络请求
  axios({
    url: '/api/Imgs/Img',
    method: 'post',
    data: f,
  })
    .then((res) => {
      console.log(res);
      if (res.data == '不是图片') {
        alert('您上传的不是图片');
        return;
      } else if (res.data == '大于2M') {
        alert('大于2M');
        return;
      } else {
        info.Photo = res.data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//4.确认修改
const ok = () => {
  //1.有效性
  if (info.ShopName == '') {
    alert('门店名称不能为空');
    return;
  }
  //全部判断非空
  //复选框必选
  if (info.TeSe.length == 0) {
    alert('特色必选一项');
    return;
  }
  //2.发送网络请求
  info.TeSeCount = info.TeSe.length;
  info.TeSe = info.TeSe.toString();
  axios({
    url: '/api/Houses/UpdateShopModel',
    method: 'put',
    data: info,
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('修改成功');
        return;
      } else if (res.data == -1) {
        alert('修改已存在的门店名称');
        return;
      } else {
        alert('修改失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
